import React from 'react'
import {
    StyleSheet,
    FlatList,
    View,
} from 'react-native'
import CommunityTopCellView from './CommunityTopCellView'

export default class CommunityTopCell extends React.PureComponent {
    render() {
        return (
            <View style={styles.container} >
                <FlatList
                    style={styles.flatList}
                    data={this.props.data}
                    renderItem={this.renderItem}
                    keyExtractor={this.keyExtractor}
                    ItemSeparatorComponent={this.renderSeparator}
                    extraData={this.state}
                />
            </View>
        )
    }
    
    keyExtractor = (item, index) => '' + index;

    renderItem = ({item}) => {
        return (
            <CommunityTopCellView data={item} clickTopAction={this.props.clickTopAction}/>
        )
    }

    renderSeparator = () => {
        return (
            <View style={styles.separator} />
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        padding:10,
    },
    flatList:{
        backgroundColor:'white',
        shadowRadius:5,
        shadowOpacity:0.2,
        shadowColor:'#000',
        shadowOffset:{width:2,height:2},
        borderRadius:4,
    },
    separator:{
        height: 0.5,
        marginRight: 10,
        backgroundColor: '#eeeeee',
        marginLeft: 10,
    }
})